﻿@page "/components/overlay"
@page "/components/MudOverlay"

<DocsPage>
    <DocsPageHeader Title="Overlay" Component="@nameof(MudOverlay)" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="AutoClose">
                <Description>The <CodeInline>AutoClose</CodeInline> property is used to let users close the overlay by clicking it.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayUsageExample)">
                <OverlayUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Absolute">
                <Description>The overlay can be contained inside its parent using the <CodeInline>Absolute</CodeInline> property and CSS <CodeInline>Style="position: relative;"</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayAbsoluteExample)" ShowCode="false">
                <OverlayAbsoluteExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color">
                <Description>The overlay is <CodeInline>transparent</CodeInline> by default but can be changed with <CodeInline>DarkBackground</CodeInline> or <CodeInline>LightBackground</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayColorsExample)" ShowCode="false">
                <OverlayColorsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Z-index">
                <Description>With the <CodeInline>ZIndex</CodeInline> property you can control the stack order of the component.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayZIndexExample)" ShowCode="false">
                <OverlayZIndexExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Loader">
                <Description>The Overlay component can take any child content but here we are using it to display loading progress.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayLoaderExample)" ShowCode="false" Block="true">
                <OverlayLoaderExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>